<template>
	<!--TODO: 默认图片在 cos 上添加 -->
	<view v-if="conversation.conversationID" class="t-conversation-item-container">
		<van-swipe-cell :right-width="75">
			<van-cell-group>
				<view class="t-conversation-item" @click="handleRoute">
					<view class="avatar-box">
						<image class="t-conversation-item-avatar" mode="aspectFill" :src="setConversationAvatar"
							@error="handleImageError">
						</image>
						<view class="unread" v-if="conversation.unreadCount !== 0">
							<view class="read-text" v-if="conversation.unreadCount > 99">99+</view>
							<view class="read-text" v-else>{{ conversation.unreadCount }}</view>
						</view>
					</view>
					<view class="t-conversation-item-content">
						<label class="tui-conversation-item-name">{{ conversationName }}</label>
						<view class="tui-conversation-lastMessage">
							<text>{{ conversation.lastMessage.messageForShow }}</text>
						</view>
					</view>
					<view class="t-conversation-item-info">{{ timeago }}</view>
				</view>
			</van-cell-group>
			<view class="t-conversation-delete" slot="right">
				<view class="del" @tap.stop="deleteConversation">
					<image src="/static/profile/profileItems/delete.png" mode="aspectFill"></image>
				</view>
			</view>
		</van-swipe-cell>
	</view>
</template>

<script>
	import {
		caculateTimeago
	} from '../../base/common';

	import vanSwipeCell from '@/wxcomponents/vant/weapp/dist/swipe-cell/index'
	import vanCellGroup from '@/wxcomponents/vant/weapp/dist/cell-group/index'

	export default {
		data() {
			return {
				xScale: 0,
				conversationName: '',
				conversationAvatar: '',
				setConversationAvatar: '',
				timeago: '',
				lock: false,
				last: 0
			};
		},

		components: {
			vanSwipeCell,
			vanCellGroup
		},
		props: {
			conversation: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			conversation: {
				handler: function(conversation) {
					// 计算时间戳
					this.setData({
						conversationName: this.getConversationName(conversation),
						setConversationAvatar: this.setConversationAvatarHandler(conversation),
						timeago: caculateTimeago(conversation.lastMessage.lastTime * 1000)
					});
					this.$updateTimeago(conversation);
				},
				immediate: true,
				deep: true
			}
		},

		methods: {
			handleRoute() {
				this.$parent.handleRoute(this.conversation.conversationID)
			},
			// 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID
			getConversationName(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					return '系统通知';
				}

				if (conversation.type === 'C2C') {
					return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
				}

				if (conversation.type === 'GROUP') {
					return conversation.groupProfile.name || conversation.groupProfile.groupID;
				}
			},

			setConversationAvatarHandler(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					return 'https://web.sdk.qcloud.com/component/TUIKit/assets/system.png';
				}

				if (conversation.type === 'C2C') {
					return conversation.userProfile.avatar ||
						'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png';
				}

				if (conversation.type === 'GROUP') {
					return conversation.groupProfile.avatar || '/static/static/assets/gruopavatar.svg';
				}
			},

			deleteConversation() {
				uni.showModal({
					title:'提示',
					content: '确认删除会话？',
					success: res => {
						if (res.confirm) {
							uni.$TUIKit.deleteConversation(this.conversation.conversationID);
							this.setData({
								conversation: {},
								xScale: 0
							});
						}
					}
				});
			},

			handleTouchMove(e) {
				if (!this.lock) {
					this.last = e.detail.x;
					this.lock = true;
				}

				if (this.lock && e.detail.x - this.last < -5) {
					this.setData({
						xScale: -75
					});
					setTimeout(() => {
						this.lock = false;
					}, 2000);
				} else if (this.lock && e.detail.x - this.last > 5) {
					this.setData({
						xScale: 0
					});
					setTimeout(() => {
						this.lock = false;
					}, 2000);
				}
			},

			$updateTimeago(conversation) {
				if (conversation.conversationID) {
					// conversation.lastMessage.timeago = caculateTimeago(conversation.lastMessage.lastTime * 1000);
					conversation.lastMessage.messageForShow = conversation.lastMessage.messageForShow.slice(0, 15);
				}
				this.setData({
					conversation
				});
			},

			handleImageError() {
				this.setData({
					setConversationAvatar: '/static/static/assets/gruopavatar.svg'
				});
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
